<template>
  <div>
    <!-- 入职 -->
    <div>
      
    </div>
    <el-row>
      <el-col :span="22">
        <div class="sec-title">权限管理</div>
      </el-col>
      <el-col :span="2">
        <div>
          <i class="el-icon-plus sec-blue"></i>
          <el-button @click="saveHandle" type="text">新增</el-button>
        </div>
      </el-col>
    </el-row>
    <!-- 筛选条件 -->
    <el-form
      :inline="true"
      :model="queryParams"
      class="demo-form-inline"
    >
      <el-form-item label="权限名称">
        <el-input
          v-model="queryParams.authorityName"
          placeholder="权限名称"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="initSearchAuthorities"
        >查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table
      :data="authorities"
      height="590"
    >
      <el-table-column
        prop="authorityId"
        label="权限编号"
      >
      </el-table-column>
      <el-table-column
        prop="authorityName"
        label="权限名称"
      >
      </el-table-column>
      <el-table-column
        prop="auhorityType"
        label="权限类型"
      >
      <template slot-scope="scope">
        {{ parseAuthorityType(scope.row.authorityType) }}
      </template>
      </el-table-column>
      <el-table-column
        prop="authorityIcon"
        label="图标"
      >
      </el-table-column>
      <el-table-column
        prop="authorityPath"
        label="路由路径"
      >
      </el-table-column>
      <el-table-column
        prop="authorityComponent"
        label="路由组件"
      >
      </el-table-column>
      <el-table-column
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="editHandle(scope.row)"
          >修改</el-button>
          <el-button
            type="text"
            size="small"
            @click="deleteHandle(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="pageData.total"
      @prev-click="preHandle"
      @next-click="nextHandle"
      @current-change="currentChangeHandle"
    >
    </el-pagination>

    <el-drawer
      :title="isAddAuthority ? '新增权限' : '修改权限'"
      :visible.sync="changeAuthorityKey"
      >
      <el-form :model="newAuthority" label-width="80px">
        <el-form-item v-if="!isAddAuthority" label="权限编号">
          <el-input disabled v-model="newAuthority.authorityId"></el-input>
        </el-form-item>
        <el-form-item label="权限名称">
          <el-input v-model="newAuthority.authorityName"></el-input>
        </el-form-item>
        <el-form-item label="组件名称">
          <el-input v-model="newAuthority.authorityComponent"></el-input>
        </el-form-item>
        <el-form-item label="路由路径">
          <el-input v-model="newAuthority.authorityPath"></el-input>
        </el-form-item>
        <el-form-item label="图标">
          <el-input v-model="newAuthority.authorityIcon"></el-input>
        </el-form-item>
        <el-form-item label="权限类型">
          <el-select v-model="newAuthority.authorityType" @change="authorityTypeHandle" placeholder="权限类型">
            <el-option v-for="(type, index) in authorityTypes" :key="index" :label="type.codeName" :value="type.codeValue" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="!hasNoAuthorityParent" label="父级权限">
          <el-select v-model="newAuthority.authorityParent" placeholder="父级权限">
            <el-option v-for="(parent, index) in authorityParents" :key="index" :label="parent.authorityName" :value="parent.authorityId" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="changeAUthorityHandle">确定</el-button>
          <el-button @click="changeAuthorityKey = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import { getConfig, queryAuthorities, queryParentAuthorities, saveAuthority, editAuthority, deleteAuthority, parseConfig } from '@/api/system/system';
export default {
  data() {
    return {
      positions: {},
      isAddAuthority: false,
      changeAuthorityKey: false,
      newAuthority: {
        authorityId: '',
        authorityName: '',
        authorityType: '',
        authorityPath: '',
        authorityComponent: '',
        authorityIcon: '',
        authorityParent: ''
      },
      hasNoAuthorityParent: true,
      hasNoAuthorityType: true,
      authorities: [],
      authorityTypes: [],
      authorityParents: [],
      queryParams: {
          authorityName: '',
          current: 0,
          pageSize: 10
      },
      pageData: {
        current: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  async mounted() {
    const {data: typeRes} = await getConfig({codeType: 'AUTHORITY_TYPE', codeValue: ''})
    if (typeRes.code === 200) {
      this.authorityTypes = typeRes.data.cache
    }
    const {data: parentRes} = await queryParentAuthorities()
    if (parentRes.code === 200) {
      this.authorityParents = parentRes.data.authorities
    }
    this.initSearchAuthorities()
  },
  computed: {
    parseAuthorityType() {
      return function(type) {
        return parseConfig(this.authorityTypes, String(type))
      }
    }
  },
  methods: {
    async changeAUthorityHandle() {
      if (this.isAddAuthority) {
        const {data: saveRes} = await saveAuthority(this.newAuthority)
        if (saveRes.code === 200) {
          this.$message.success('新增成功')
        }
        if (saveRes.code === 500) {
          this.$message.error(saveRes.message)
        }
      } else {
        const {data: editRes} = await editAuthority(this.newAuthority)
        if (editRes.code === 200) {
          this.$message.success('新增成功')
        }
        if (editRes.code === 500) {
          this.$message.error(editRes.message)
        }
      }
      this.changeAuthorityKey = false
      this.searchAuthorities()
    },
    authorityTypeHandle(value) {
      if (value === '1') {
        this.hasNoAuthorityParent = false
      } else {
        this.hasNoAuthorityParent = true
        this.newAuthority.authorityParent = 0
      }
    },
    preHandle(current) {
      this.currentChangeHandle(current)
    },
    nextHandle(current) {
      this.currentChangeHandle(current)
    },
    currentChangeHandle(current) {
      this.pageData.current = current
      this.searchAuthorities()
    },
    saveHandle() {
      this.newAuthority = {
        authorityId: '',
        authorityName: '',
        authorityType: '',
        authorityPath: '',
        authorityComponent: '',
        authorityIcon: '',
        authorityParent: ''
      }
      this.isAddAuthority = true
      this.changeAuthorityKey = true
    },
    editHandle(row) {
        this.newAuthority = {...row}
        this.isAddAuthority = false
        this.changeAuthorityKey = true
    },
    deleteHandle(row) {
      let _this = this
      this.$alert('删除权限', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _this.deleteAuthorityHandle(row)
        }).catch(() => {
          _this.$message.success('已取消')
        })
        
      
    },
    async deleteAuthorityHandle(row) {
      const {data: res} = await deleteAuthority(row.authorityId)
      if (res.code === 200) {
        this.$message.success("删除成功")
      }
      if (res.code === 500) {
        this.$message.error(res.message)
      }
      this.searchAuthorities()
    },
    initSearchAuthorities() {
      this.pageData.current = 1
      this.pageData.pageSize = 10
      this.searchAuthorities()
    },
    async searchAuthorities() {
      this.queryParams.current = this.pageData.current
      this.queryParams.pageSize = this.pageData.pageSize
      const {data: res} = await queryAuthorities(this.queryParams)
      if (res.code === 200) {
        this.authorities = res.data.authorities.records
        this.pageData.total = res.data.authorities.total
      }
    }
  },
};
</script>

<style lang="css" scoped>
.sec-blue {
  color: #409eff;
}
.sec-title {
  font-size: 18px;
  font-weight: 700;
}
</style>